import React from 'react'
import '../style.css'
import {
    ADD_TODO, PENDDING_TO_FINISHED,
    FINISHED_TO_PENDDING,
    PENDDING_DELETE,
    FINISHED_DELETE
} from '../redux/action'
import { connect } from 'react-redux'

class TodoList extends React.Component {

    render() {
        return (
            <div className="todolist_container">
                <div className="todolist_wrapper">
                    <div className="todolist_input_container">
                        <div className="todolist_title">ToDoList</div>
                        <div className="todolist_input">
                            <input type="text" placeholder="回车添加todo" ref="input"
                                onKeyDown={(e) => {
                                    var value = this.refs.input.value
                                    // console.log(value)
                                    if (e.keyCode === 13) {
                                        this.props.addtodo(value)
                                        this.refs.input.value = ""
                                    }
                                }} />
                        </div>
                        <div className="todolist_title"></div>

                    </div>
                    <div className="todolist_main_container">
                        {/* 进行中 */}
                        <div className="todolist_pendding_header">
                            <div className="">进行中</div>
                            <div className="todolist_count">
                                {this.props.penddingTodo.length}
                            </div>
                        </div>
                        <div className="list_container">
                            {
                                this.props.penddingTodo.map((ele, index) => {
                                    return <div className="todolist_item" key={index}>
                                        <input type="checkbox" checked={false} onChange={() => {
                                            this.props.finished(ele)
                                        }} />
                                        <div className="todolist_item_title">{ele.text}</div>
                                        <button onClick={() => {
                                            this.props.penddingdel(ele)
                                        }}>删除</button>
                                    </div>
                                })
                            }
                        </div>
                        {/* 已完成 */}
                        <div className="todolist_pendding_header">
                            <div className="">已完成</div>
                            <div className="todolist_count">
                                {this.props.finishedTodo.length}
                            </div>
                        </div>
                        <div className="list_container">
                            {
                                this.props.finishedTodo.map((ele, index) => {
                                    return <div className="todolist_item" key={index}>
                                        <input type="checkbox" checked={true} onChange={() => {
                                            this.props.pendding(ele)
                                        }} />
                                        <div className="todolist_item_title">{ele.text}</div>
                                        <button onClick={() => {
                                            this.props.finisheddel(ele)
                                        }}>删除</button>
                                    </div>
                                })
                            }
                        </div>

                    </div>
                </div>
            </div>
        )
    }
}

function mapActionToProps(dispatch) {
    return {
        addtodo: (value) => { dispatch(ADD_TODO(value)) },
        finished: (ele) => { dispatch(PENDDING_TO_FINISHED(ele)) },
        pendding: (ele) => { dispatch(FINISHED_TO_PENDDING(ele)) },
        penddingdel: (ele) => { dispatch(PENDDING_DELETE(ele)) },
        finisheddel: (ele) => { dispatch(FINISHED_DELETE(ele)) }
    }
}
function mapStateToProps(rootReducer) {
    return {
        penddingTodo: rootReducer.todoReducer.penddingList,
        finishedTodo: rootReducer.todoReducer.finishedList
    }
}



export default connect(mapStateToProps, mapActionToProps)(TodoList)